---
import Default from './Default.astro';

export interface Props {
	content: {
		title: string;
		minutesRead: string;
		date: string;
		image: string;
	};
}

const {
	content: { title, date, minutesRead, image },
} = Astro.props as Props;

---

<Default>
	<main class="p-10px xl:p-68px my-5 mx-auto bg-white shadow">
		<article class="mx-auto w-full xl:w-800px">
			{ Astro.url.pathname === '/about' && <img src={image} /> }
			<h1 class="text-center text-2xl font-bold p-5">{title}</h1>
			<time class="op-50">{date.replace('T', ' ').replace('.000Z', '')}</time>
			<time class="op-50 ml-18px">{minutesRead}</time>
			<hr/>
			<div class="doc-content">
				<slot />
			</div>

			<script>
			const el = document.querySelector('#main-content > main > article > div > p:nth-child(1)') as HTMLParagraphElement;
			if (el?.innerHTML === '[[toc]]') {
				el.style.display = 'none';
			}
			</script>
		</article>
	</main>
</Default>

<style lang="scss" is:global>
.doc-content {

	h2 {
		color: #222;
    font-weight: 700;
    font-size: 1.5em;
    margin-bottom: 1em;
    line-height: 1.3333333;

		@apply not-first:mt-8;
	}

	h3 {
		color: inherit;
    font-weight: 600;
    font-size: 1.25em;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    line-height: 1.6;
    opacity: .7;
	}

	h4 {
		color: inherit;
    font-weight: 600;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    opacity: .7;
	}

	p {
		margin-top: 1.25em;
    margin-bottom: 1.25em;
		@apply text-gray-600;

		a {
			color: #4682BE;
		}
	}

	p, ul>li {
		code {
			@apply px-3px text-[#c7254e] bg-[#f9f2f4];
		}
	}


	blockquote {
		font-weight: 400;
    font-style: italic;
    color: inherit;
    border-left-width: 0.25rem;
    border-color: #7d7d7d4d;
    quotes: "\201c""\201d""\2018""\2019";
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-left: 1em;
	}

	pre[class*="language-"] {
		overflow-x: auto;
		@apply w-[calc(100vw-20px)] xl:w-full;
	}

	ul > li {
		list-style: inside;
		@apply indent;
	}

	ol > li {
		list-style: decimal inside;
		@apply indent;
	}
}
</style>